<template>
  <div style='display: flex;justify-content: center;flex-wrap: wrap;'>
    <t-card v-for='item in aList' :style="{ width: '380px',margin:'10px'}">

      <template #cover>
        <img
          width='350'
          height='235'
          style='cursor: pointer'
          @click='goToDetail(13358)'
          :src='item.img' alt='1'
        >
      </template>

      <template #title>
        {{ item.title }}
      </template>

      <template #subtitle>
        {{ item.subTitle }}
      </template>

      <template #actions>
        <t-dropdown :options='options' :min-column-width='112' @click='clickHandler'>
          <t-button variant='text' shape='square'>
            <more-icon />
          </t-button>
        </t-dropdown>
      </template>

    </t-card>
  </div>
</template>

<script>
import { MoreIcon } from 'tdesign-icons-vue'

export default {
  components: {MoreIcon},
  data () {
    return {
      options: [{content: '修改', value: 1}, {content: '查看', value: 2}, {content: '删除', value: 3}],
      aList: [
        {
          title: '小土狗',
          subTitle: '蹦蹦跳跳，兴奋灵活型',
          img: 'https://ts1.cn.mm.bing.net/th/id/R-C.976a154abf33faf69ecabadfce259550?rik=3i7zXeKgV2dASQ&riu=http%3a%2f%2fnews.cjn.cn%2f24hour%2fwh24%2f201904%2fW020190408526198615338.jpg&ehk=toFIb8AtBEM3k68G2F4%2fHIUSl2meKXMLK4cEEA24cmE%3d&risl=&pid=ImgRaw&r=0'
        },
        {
          title: '蝴蝶犬',
          subTitle: '性格比较活泼，警惕性高',
          img: 'https://ts1.cn.mm.bing.net/th/id/R-C.ce87fe49ca93c846f93ec5ae79e1e0d5?rik=8ko6PsIv63EVsQ&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fphotoblog%2f7%2f8%2f5%2f8%2f7858193%2f20101%2f27%2f1264555888345.jpg&ehk=BFgCTyZcZMaNPyssx25sVb3%2fT%2bqUYBX01l7ruoF4nGg%3d&risl=&pid=ImgRaw&r=0'
        },
        {
          title: '狸花猫',
          subTitle: '时刻跟着主人，超黏人型',
          img: 'https://img.zcool.cn/community/016c935c26de98a8012029ace8ceb7.jpg@1280w_1l_2o_100sh.jpg'
        },
        {
          title: '小京巴',
          subTitle: '好斗勇猛型',
          img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.WBN-YyoKC7DNW8Ao8E7NOwHaFj?rs=1&pid=ImgDetMain'
        },
        {
          title: '中华狸花猫',
          subTitle: '怯弱胆小型',
          img: 'https://img.zcool.cn/community/014f7f5c26de80a8012029acfbc8ee.jpg@1280w_1l_2o_100sh.jpg'
        },
        {
          title: '秋犬',
          subTitle: '性情比较稳定，非常爱打呼噜，而且很响。',
          img: 'https://img.tukuppt.com/photo-big/17/04/24/51/52/170424515222.jpg'
        },
        {
          title: '土狗',
          subTitle: '性格温顺，对人十分依赖，，比较粘人',
          img: 'https://img.tukuppt.com/photo-big/18/07/02/29/24/180702292443.jpg'
        },
        {
          title: '小土狗',
          subTitle: '呆萌可爱, 性格胆小',
          img: 'https://ts1.cn.mm.bing.net/th/id/R-C.7d8bbca984002897e6a1a660e610d75b?rik=hqKXr8kTSpN4Xw&riu=http%3a%2f%2fpic.ntimg.cn%2f20131213%2f13932412_203351343197_2.jpg&ehk=VJngHiSrkAjDBqCn1cpKRsQkcHYBipUqZsLPqiEj%2bJc%3d&risl=&pid=ImgRaw&r=0'
        }
      ]
    }
  },
  methods: {
    clickHandler (data) {
      console.log('选中', data)
    },
    goToDetail (vAId) {
      this.$router.push({
        path: '/vagabond/detail',
        query: {
          vAId
        }
      })
    }
  }
}
</script>

<style>
.t-card__header {
  padding: 9px;
  margin: 0;
}

</style>
